<template>
<div class="container">
  <!-- 头上部分不一样分出去 -->
  <!-- <div class="box">
    <header>头部</header>
    <section>内容</section>
  </div> -->
  <router-view />
  <router-view name='footer'></router-view>
</div>
</template>

<style lang="scss" scopded>
@import '@/lib/reset.scss';
.container{
  @include rect(100%, 100%);
  @include flexbox();
  @include flex-direction(column);
  .box{
    @include flex();
    @include flexbox();
    @include flex-direction(column);
    @include rect(100%, auto);
    @include overflow(auto);
    header{
      @include rect(100%, 0.44rem);
      // background-color: #00CC99;
    }
    section{
      background-color: rgba($color: #9999, $alpha: 0.1);
      @include rect(100%, auto);
      @include overflow(auto);
    }
  }
  footer{
    @include rect(100%, 0.49rem);
    border-top: 2px solid #F2F2F2;
    ul{
        @include rect(100%, 100%);
        @include flexbox();
      li{
        flex: 1;
        @include rect(100%, 100%);
        @include flexbox();
        @include flex-direction(column);
        @include justify-content();
        @include align-items();
        &.router-link-exact-active,.router-link-active{
         @include color(#00CC99);
        }
        p{
          font-size: 10px;
        }
        i{
          font-size: 22px;
        }
      }
    }
  }
}
</style>
